import type { Control, FieldValues, Path } from "react-hook-form"
import { FormControl, FormField, FormItem, FormLabel } from "@/shared/ui/form"
import type {
  MultipleSelectorProps,
  Option,
} from "@/shared/ui/fancyMultiSelect"
import FancyMultiSelect from "@/shared/ui/fancyMultiSelect"

export interface FormMultiSelectProps<T extends FieldValues>
  extends MultipleSelectorProps {
  name: Path<T>
  control: Control<T>
  label?: string
  options: Option[]
}
export const FormMultiSelect = <T extends FieldValues>({
  name,
  control,
  options,
  label,
  ...rest
}: FormMultiSelectProps<T>) => {
  return (
    <FormField
      name={name}
      control={control}
      render={({ field: { value, onChange } }) => {
        return (
          <FormItem>
            {!!label && <FormLabel>{label}</FormLabel>}
            <FancyMultiSelect
              value={value}
              onChange={onChange}
              options={options}
              {...rest}
            />
          </FormItem>
        )
      }}
    />
  )
}
